<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" href="/css/font.css">
		<link rel="stylesheet" href="/css/xadmin.css">
		<link rel="stylesheet" href="/css/myCustom.css">
	</head>

	<body>
		<div class="x-nav">
			<span class="layui-breadcrumb">
				<a href="#">学校信息管理</a>
				<a>
					<cite>专业管理</cite></a>
			</span>
			<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);"
			 title="刷新">
				<i class="layui-icon" style="line-height:30px">ဂ</i></a>
		</div>

		<div class="x-body" id="app">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md3">
					<div class="layui-card">
						<xblock>
							院系列表
						</xblock>
						<ul id="majorTree">
						  <li><a href="javascript:;" class="allMajor"><i class="layui-icon layui-tree-leaf"></i><cite>全部</cite></a></li>
						</ul>
					</div>
				</div>
				<div class="layui-col-md9">
					<xblock>
							<button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
							<button class="layui-btn" onclick="open_addMajor()"><i class="layui-icon"></i>添加</button>
							<span class="x-right" style="line-height:40px">共有数据：{{ pageInfo.total }} 条，当前{{ pageInfo.pageNum }} / {{ pageInfo.pages }}页</span>
							<form id="import_excel_form" enctype="multipart/form-data">
								<input type="file" hidden="hidden" name="excelFile" id="importInput" onchange="import_excel(this)" accept=".xlsx"/>
							</form>
					</xblock>
					<table class="layui-table">
						<thead>
							<tr>
								<th width="20">
									<div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i class="layui-icon">&#xe605;</i></div>
								</th>
								<th width="100">专业代码</th>
								<th>专业名称</th>
								<th>所属院系</th>
								<th width="150">操作</th>
						</thead>
						<tbody>
							<tr v-for="schMajor in schMajors">
								<td>
									<div class="layui-unselect layui-form-checkbox" lay-skin="primary" :data-id="schMajor.id" :data-majorName="schMajor.majorName" ><i class="layui-icon">&#xe605;</i></div>
								</td>
								<td>{{ schMajor.majorNo }}</td>
								<td>{{ schMajor.majorName }}</td>
								<template v-for="schOrg in schOrgs">
								<td v-if="schOrg.id == schMajor.orgId">{{ schOrg.orgName }}</td>
								</template>
								<td class="td-manage">
									<button class="layui-btn layui-btn layui-btn-sm" onclick="open_editMajor(this)"><i class="layui-icon">&#xe642;</i>编辑</button>
									<button class="layui-btn-danger layui-btn layui-btn-sm" onclick="member_del(this)" href="javascript:;"><i class="layui-icon">&#xe640;</i>删除</button>
								</td>
							</tr>
						</tbody>
					</table>
					<div class="page" style="margin-top: 10px !important;">
				        <div>
				          <a class="prev pageTxt" href="javascript:void(0)">上一页</a>
				          <a class="first pageTxt" href="javascript:void(0)">首页</a>
				          <template v-for="pageNum in pageInfo.navigatepageNums">
				              <a class="num" href="javascript:void(0)" v-if="pageInfo.pageNum != pageNum" :data="pageNum">{{ pageNum }}</a>
				              <span class="current" v-else :data="pageNum">{{ pageNum }}</span>
				          </template>
				          <a class="last pageTxt" href="javascript:void(0)">尾页</a>
				          <a class="next pageTxt" href="javascript:void(0)">下一页</a>
				        </div>
				      </div>
				</div>
			</div>
		</div>
		
		<script type="text/javascript" src="/js/jquery.min.js"></script>
	    <script type="text/javascript" src="/js/xadmin.js"></script>
	    <script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
	    <script type="text/javascript" src="/js/vue.min.js"></script>
	    <script type="text/javascript" src="/js/jquery.form.js"></script>
		<script>
			var vm = new Vue({
	            el : '#app',
	            data : {
	                schOrgs : "",
	                pageInfo:"",
	                schMajors:"",
	                // 当前选中的院系id
	                orgId:0
	            },
	            created : function() {
	                // 获取学校院系列表
	                this.listSchOrgWithTree();
	                // 获取学校专业列表(0:全部)
	                this.listSchMajor(0, 1);
	            },
	            methods : {
	            	listSchOrgWithTree : function() {
	                    var vm = this;
	                    $.ajax({
	                        url : "/sys/school/major/listSchOrgWithTree",
	                        type : "get",
	                        success : function(result) {
	                            if (result.state) {
	                            	var data = result.data;
	                                var schOrgTree = JSON.parse(data.listSchOrgWithTree);
	                                vm.schOrgs = data.listSchOrg;
	                                // 加载tree数据(放在其它地方会容易导致加载不出来tree数据)
	                                layui.use('tree', function() {
	                                    layui.tree({
	                                        elem: '#majorTree', //传入元素选择器
	                                        nodes: schOrgTree,
	                                        click: function(node) {
	                                            // node即为当前点击的节点数据
	                                        	if (vm.orgId != node.id) {
		                                        	vm.orgId = node.id;
		                                        	vm.listSchMajor(vm.orgId, 1);
	                                        	}
	                                        }
	                                    });
	                                });
	                            } else {
	                                layui.use(['layer'], function(){
	                                	var layer = layui.layer
		                                layer.msg(""+result.msg, {icon: 5});
                                	});
	                            }
	                        }
	                    });
	                },
	                listSchMajor:function(orgId, pageNum) {
	                	var vm = this;
                        $.ajax({
                            url : "/sys/school/major/listSchMajor",
                            data:{
                            	orgId:orgId,
                            	pageNum:pageNum
                            },
                            type : "get",
                            success : function(result) {
                                if (result.state) {
                                	vm.pageInfo = result.data;
                                	vm.schMajors = result.data.list;
                                } else {
                                	layui.use(['layer'], function(){
                                        var layer = layui.layer
                                        layer.msg(""+result.msg, {icon: 5});
                                    });
                                }
                            }
                        });
	                }
	            }
	        });
			$(function() {
				// 首次加载tree数据时,默认选中"全部"
				$("#majorTree li:first").addClass("selectColor");
			})

			// 对选中的当前树节点加背景颜色
			$("body").on("mousedown", ".layui-tree li a", function() {
				$(".layui-tree li, li a").removeClass("selectColor");
				if ($(this).hasClass("allMajor")) {
					// 如果是“全部”，单独处理
					$(this).parent("li").addClass("selectColor");
					if (vm.orgId != 0) {
						// 获取全部的专业
						vm.listSchMajor(0, 1);
					}
					vm.orgId = 0;
				} else {
					$(this).addClass("selectColor");
				}
			})

			// 点击页码数，进行跳转
	        $(".page").delegate(".num", "click", function() {
	            var pageNum = $(this).attr("data");
                vm.listSchMajor(vm.orgId, pageNum);
	        });
	        // 上一页
	        $(".page").delegate(".prev", "click", function() {
	            if (vm.pageInfo.hasPreviousPage) {
	            	vm.listSchMajor(vm.orgId, vm.pageInfo.pageNum - 1);
	            }
	        });
	        // 下一页
	        $(".page").delegate(".next", "click", function() {
	            if (vm.pageInfo.hasNextPage) {
	            	vm.listSchMajor(vm.orgId, vm.pageInfo.pageNum + 1);
	            }
	        });
	        // 首页
	        $(".page").delegate(".first", "click", function() {
	            if (!vm.pageInfo.isFirstPage) {
	            	vm.listSchMajor(vm.orgId, 1);
	            }
	        });
	        // 尾页
	        $(".page").delegate(".last", "click", function() {
	            if (!vm.pageInfo.isLastPage) {
	            	vm.listSchMajor(vm.orgId, vm.pageInfo.pages);
	            }
	        });
			
			// 添加专业
			function open_addMajor() {
				if (vm.orgId == 0) {
                    layer.msg('请在左侧‘院系列表’选择一个院系', {icon: 5});
                    return;
				}
				layer.open({
					type: 1 ,//Page层类型
					btn: ["确定", "取消"],
					title: '添加专业',
					skin: 'layui-layer-prompt',
					content: "<input type='number' class='layui-layer-input' placeholder='专业代码,五位数字'><br><input type='text' class='layui-layer-input' placeholder='专业名称，2-15个字符'>",
					yes: function(index, layero) {
						// 按钮【按钮一】的回调
						var majorNo = $(layero).find("input[type='number']").val();
						var majorName = $(layero).find("input[type='text']").val();
						// 数据检验
						if (majorNo.length != 5) {
                            layer.msg('专业代码,五位数字', {icon: 5,time: 1000});
                            return;
                        }
						var reg_majorName = /^[\S]{2,15}$/;
						if (!reg_majorName.test(majorName)) {
							layer.msg('专业名称2-15个字符，且不能出现空格', {icon: 5,time: 1000});
							return;
						}
						// 保存
						$.ajax({
                            url : "/sys/school/major/saveSchMajor",
                            data:{
                            	majorNo:majorNo,
                            	majorName:majorName,
                            	orgId:vm.orgId
                            },
                            type : "post",
                            success : function(result) {
                                if (result.state) {
                                	layer.msg("添加成功", {icon: 1});
									vm.listSchMajor(vm.orgId, vm.pageInfo.pages);
									// 关闭
									layer.close(index);
                                } else {
                                    layer.msg(""+result.msg, {icon: 5});
                                }
                            }
                        });
					}
				})
			}

			// 编辑专业
			function open_editMajor(obj) {
				var majorNo = $(obj).parents("tr").find("td:eq(1)").text();
				var majorName = $(obj).parents("tr").find("td:eq(2)").text();
				var majorId = $(obj).parents("tr").find("div:first").attr("data-id");
				layer.open({
					type: 1 ,//Page层类型
					btn: ["确定", "取消"],
					title: '编辑专业',
					skin: 'layui-layer-prompt',
					content: "<input type='number' class='layui-layer-input' value='"+majorNo+"' placeholder='专业代码,五位数字'><br><input type='text' class='layui-layer-input' value='"+majorName+"' placeholder='专业名称，2-15个字符'>",
					yes: function(index, layero) {
						// 按钮【按钮一】的回调
						var majorNo = $(layero).find("input[type='number']").val();
						var majorName = $(layero).find("input[type='text']").val()
						// 数据检验
                        if (majorNo.length != 5) {
                            layer.msg('专业代码,五位数字', {icon: 5,time: 1000});
                            return;
                        }
                        var reg_majorName = /^[\S]{2,15}$/;
                        if (!reg_majorName.test(majorName)) {
                            layer.msg('专业名称2-15个字符，且不能出现空格', {icon: 5,time: 1000});
                            return;
                        }
                        // 修改
                        $.ajax({
                            url : "/sys/school/major/updateSchMajor",
                            data:{
                            	id:majorId,
                                majorNo:majorNo,
                                majorName:majorName,
                                orgId:vm.orgId
                            },
                            type : "post",
                            success : function(result) {
                                if (result.state) {
                                    layer.msg("修改成功", {icon: 1});
                                    vm.listSchMajor(vm.orgId, vm.pageInfo.pageNum);
                                    // 关闭
                                    layer.close(index);
                                } else {
                                    layer.msg(""+result.msg, {icon: 5});
                                }
                            }
                        });
					}
				})
			}
		
			
			
			/*单个删除*/
			function member_del(obj) {
				var majorName = $(obj).parents("tr").find("div:first").attr("data-majorName");
	            var id = $(obj).parents("tr").find("div:first").attr("data-id");
	            var majorId = [];
	            majorId.push(id);
				layer.confirm('确认要删除【'+majorName+'】吗？', function(index) {
					 $.ajax({
		                  url : "/sys/school/major/delSchMajor",
		                  type : "post",
		                  data : {
		                	  majorId: majorId
		                  },
		                  success : function(result) {
		                      if (result.state) {
		                          layer.msg('删除成功!',{icon:1,time:1000});
		                          
		                          // 根据当前页面数据量决定加载前一页还是当前页
		                          if (vm.pageInfo.size - 1 == 0 && vm.pageInfo.pageNum != 1) {
	                                  vm.listSchMajor(vm.orgId, vm.pageInfo.pageNum - 1);
		                          } else {
		                        	  vm.listSchMajor(vm.orgId, vm.pageInfo.pageNum);
		                          }
		                      } else {
		                          layer.msg(""+result.msg, {icon: 5});
		                      }
		                  }
		              });
				});
			}

			// 批量删除
			function delAll(argument) {
				var majorId = tableCheck.getData();
	            if (majorId.length <= 0) {
	                return;
	            }
	            // 获取选中的专业名称
	            var obj = $(".layui-form-checked").not('.header');
	            var majorName=[];
	            obj.each(function(index, el) {
	            	majorName.push(obj.eq(index).attr('data-majorName'));
	            });
				layer.confirm('确认要删除【'+majorName+'】吗？', function(index) {
					$.ajax({
	                    url : "/sys/school/major/delSchMajor",
	                    type : "post",
	                    data : {
	                    	majorId: majorId
	                    },
	                    success : function(result) {
	                        if (result.state) {
	                            layer.msg('删除成功', {icon: 1});
	                            // 移除所有checkbox的勾选状态
                           		$(".layui-form-checkbox").removeClass('layui-form-checked');
	                            
                           	    // 根据当前页面数据量决定加载前一页还是当前页
                                if (vm.pageInfo.size - majorId.length == 0 && vm.pageInfo.pageNum != 1) {
                                    vm.listSchMajor(vm.orgId, vm.pageInfo.pageNum - 1);
                                } else {
                                    vm.listSchMajor(vm.orgId, vm.pageInfo.pageNum);
                                }
	                        } else {
	                            layer.msg(""+result.msg, {icon: 5});
	                        }
	                    }
	                });
				});
			}
		</script>
	</body>

</html>
